<template>
	<view>
		<view class="notice_bar">添加多个求职意向，可获得更多精准推荐的工作机会</view>
		<view class="box_1">
			<view class="box_content">
				<view class="tx1" @click="showPickerCurrent = !showPickerCurrent">
					求职状态
					<view class="right_txt">{{ currentName }}</view>
				</view>
				<u-picker v-model="showPickerCurrent" mode="selector" :range="columnsCurrent" range-key="text"
					@confirm="onConfirmCurrent" @cancel="showPickerCurrent = false" />
				<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
				<view class="tx2" v-for="(item, index) in intentionList" :key="index"
					@click="handleClick('/personal/EditIntention?id',item.id)">
					<view class="name">
						[{{ item.district_text }}] {{ item.category_text }}
					</view>
					<view class="intent">
						{{ item.wage_text }}，{{ item.nature_text }}，{{ item.trade_text }}
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<view class="tx2" v-for="(item, index) in intentionList" :key="index"
					@click="handleJump({path:'/personal/EditIntention?id=',query:{id:item.id}})">
					<view class="name">
						[{{ item.district_text }}] {{ item.category_text }}
					</view>
					<view class="intent">
						{{ item.wage_text }}，{{ item.nature_text }}，{{ item.trade_text }}
					</view>
				</view>
				<!-- #endif -->
			</view>
			<u-button type="primary" shape="circle" v-if="intentionList.length < 3"
				@click="handleClick('/personal/EditIntention',0)">
				添加求职意向({{intentionList.length}}/3)
			</u-button>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	export default {
		name: 'PersonalRecommendAdd',
		data() {
			return {
				current: '',
				currentName: '',
				showPickerCurrent: false
			}
		},
		mounted() {
			this.$store.dispatch('getClassify', 'current')
		},
		onShow() {
			this.initInfo()
		},
		computed: {
			basic() {
				return this.$store.state.resume.basic
			},
			intentionList() {
				return this.$store.state.resume.intention_list
			},
			columnsCurrent() {
				return this.$store.state.classifyCurrent
			}
		},
		methods: {
			handleClick(path, id) {
				uni.navigateTo({
					url: path + id
				})
			},
			handleJump(params) {
				console.log(params)
				uni.navigateTo({
					url: params.path + params.query.id
				})
			},
			initInfo() {
				http.get(api.editResume).then(res => {
						if (parseInt(res.data.code) === 200) {
							// 更新基本资料
							this.$store.dispatch('setBasicInfo', res.data.data.basic)
							// 更新简历求职意向
							this.$store.dispatch('setIntentionList', res.data.data.intention_list)
							// 当前求职状态
							this.current = this.basic.current
							this.currentName = this.basic.current_text
						} else {
							this.$refs.uTips.show({
								title: res.data.message
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 选择求职状态
			onConfirmCurrent(value) {
				this.current = this.columnsCurrent[value[0]].id
				this.currentName = this.columnsCurrent[value[0]].text
				this.showPickerCurrent = !this.showPickerCurrent
				http
					.post(api.resume_current_save, {
						current: this.current
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: '成功修改求职状态',
								type: 'success',
							})
							let currentBasic = this.$store.state.resume.basic
							currentBasic.current = this.current
							currentBasic.current_text = this.currentName
							// 更新基本资料
							this.$store.dispatch('setBasicInfo', currentBasic)
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box_1 {
		.box_content {
			padding-bottom: 100rpx;

			.tx2 {
				.intent {
					font-size: 24rpx;
					color: #666666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.name {
					font-size: 30rpx;
					color: #333333;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 19rpx;
				}

				&::after {
					position: absolute;
					right: 12rpx;
					top: 42rpx;
					width: 12rpx;
					height: 12rpx;
					border-top: 2rpx solid #666666;
					border-right: 2rpx solid #666666;
					transform: rotate(45deg);
					content: " ";
				}

				padding-right: 50rpx;
				margin-top: 40rpx;
				display:block;
				position: relative;
			}

			.tx1 {
				.right_txt {
					position: absolute;
					right: 40rpx;
					top: 50%;
					transform: translate(0, -50%);
					font-size: 28rpx;
					color: #666666;
				}

				&::after {
					position: absolute;
					right: 12rpx;
					top: 42rpx;
					width: 12rpx;
					height: 12rpx;
					border-top: 2rpx solid #666666;
					border-right: 2rpx solid #666666;
					transform: rotate(45deg);
					content: " ";
				}

				font-size: 30rpx;
				color: #333333;
				font-weight: bold;
				padding: 27rpx 0;
				position: relative;
				border-bottom: 2rpx solid #f5f5f5;
			}
		}

		width: 100%;
		background-color: #ffffff;
		padding: 0 34rpx;
	}

	.notice_bar {
		width: 100%;
		padding: 23rpx 0 23rpx 70rpx;
		font-size: 24rpx;
		color: #ff6600;
		background-image: $remind_ico;
		background-color: #fffbeb;
		background-position: 32rpx center;
		background-repeat: no-repeat;
		background-size: 32rpx;
	}
</style>
